<template>
    <div>

        <div class="mui-content">
            <form id='login-form' class="mui-input-group">
                <div class="mui-input-row">
                    <label>账号</label>
                    <input v-model="account" ref='account' @keydown="enter" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
                </div>
                <div class="mui-input-row">
                    <label>密码</label>
                    <input v-model="psw" autocomplete="off" ref='password' @keydown="enter" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
                </div>
            </form>
            <form class="mui-input-group">
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        自动登录
                        <div ref="autoLogin" :class="['mui-switch',{'mui-active':autoLoginStatu}]" @click="changeStatus">
                            <div class="mui-switch-handle"></div>
                        </div>
                    </li>
                </ul>
            </form>
            <div class="mui-content-padded">
                <button id='login' class="mui-btn mui-btn-block mui-btn-primary" @click="login">登录</button>
                <div class="link-area"><router-link id='reg' to="/register">注册账号</router-link> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
                </div>
            </div>
            <div class="mui-content-padded oauth-area">

            </div>
        </div>
    </div>
</template>

<script>
    import {Toast,Switch} from 'mint-ui'
    import mui from "./lib/mui/js/mui.min.js";

    export default {
        name: "login",
        data(){
            return {
                psw:'',
                account:'',
                //从本地存储上检查上次自动登录是否打开
                autoLoginStatu:'',
            }
        },
        created(){
            //若本地无数据getItem返回null
            this.autoLoginStatu=localStorage.getItem('autoLoginStatus')||'';
            // this.autoLoginData.account=JSON.parse(localStorage.getItem('autoLoginData')).account
            //如果自动登录打开从本地读取账号密码
            if(this.autoLoginStatu){
                this.account=JSON.parse(localStorage.getItem('autoLoginData')).account;
                this.psw=JSON.parse(localStorage.getItem('autoLoginData')).psw;
            }
        },
        mounted(){
        //    勾选自动登录后，刷新页面账号密码将保存上次记录
        //    需要初始化switch不然页面刚进入无效果
            mui('.mui-switch')['switch']()
            //    本地存储读取上次自动登录

        },
        methods:{
            login(){
                //若账号密码有一个以上为空
                if(!this.account||this.account.trim()==''){
                    Toast('账号不能为空')
                }else if(!this.psw||this.psw.trim()==''){
                    Toast('密码不能为空')
                }else{
                        //验证账号密码
                    this.$http.get('/api/accountinfo').then(res=>{
                        console.log(res.body)
                        if(!res.body.some(i=>{
                                localStorage.setItem('login','')
                                if(this.account==i.account&&this.psw==i.psw){
                                    //先设置账号密码登录信息为正确，再进行跳转
                                    localStorage.setItem('login',true)
                                    Toast('登陆成功')
                                this.$router.push({path:'/home'});
                                return true
                            }})){
                            Toast('账号或密码错误')
                        }
                    })

                }

            },
            enter(e){
                if(e.keyCode==13){
                    this.login()
                }
            },
            changeStatus(){
                //如果自动登录为on
                if(this.$refs.autoLogin.classList.contains('mui-active')){
                        localStorage.setItem('autoLoginStatus','AutoLogin')

                }else{
                    //localStroage保存值类型为String不是Boolean！
                    localStorage.setItem('autoLoginStatus','')
                }
                this.autoLoginStatu=localStorage.getItem('autoLoginStatus')
            },
            setDataToLocal(){
                localStorage.setItem('autoLoginData',JSON.stringify({account:this.account,psw:this.psw}))
            },
        },
        watch:{
            //监听this.autoLoginStatu 如果切换状态则改变this.autoLoginData
            autoLoginStatu:function () {
                //检测自动登录状态，若为on则将账号密码存入本地；off则将本地autoLoginData数据删除
                if(this.autoLoginStatu){
                        this.setDataToLocal()
                }else{
                    localStorage.setItem('autoLoginData',JSON.stringify({account:'',psw:''}))
                }
            },
            account(){
                if(this.autoLoginStatu){
                    this.setDataToLocal()
                }
            },
            psw(){
                if(this.autoLoginStatu){
                    this.setDataToLocal()
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
.mui-content{
    background-color: #fff;
}
    .area {
        margin: 20px auto 0px auto;
    }

    .mui-input-group {
        margin-top: 10px;
    }

    .mui-input-group:first-child {
        margin-top: 20px;
    }

    .mui-input-group label {
        width: 22%;
    }

    .mui-input-row label~input,
    .mui-input-row label~select,
    .mui-input-row label~textarea {
        width: 78%;
    }

    .mui-checkbox input[type=checkbox],
    .mui-radio input[type=radio] {
        top: 6px;
    }

    .mui-content-padded {
        margin-top: 25px;
    }

    .mui-btn {
        padding: 10px;
    }

    .link-area {
        display: block;
        margin-top: 25px;
        text-align: center;
    }

    .spliter {
        color: #bbb;
        padding: 0px 8px;
    }

    .oauth-area {
        position: absolute;
        bottom: 20px;
        left: 0px;
        text-align: center;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .oauth-area .oauth-btn {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: 30px 30px;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0px 20px;
        /*-webkit-filter: grayscale(100%); */
        border: solid 1px #ddd;
        border-radius: 25px;
    }

    .oauth-area .oauth-btn:active {
        border: solid 1px #aaa;
    }

    .oauth-area .oauth-btn.disabled {
        background-color: #ddd;
    }
</style>